<template>
    <div id="selfinfo">
        <!-- 个人信息页面主要部分 -->
        <van-cell-group title="个人信息">
            <van-cell title="头像">
                <van-image round width="5rem" height="5rem" fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </van-cell>
            <van-cell title="姓名" :value="user_name" />
            <van-cell title="学号" :value="user_username" />
            <van-cell title="我的预约次数" :value="user_reservationNumber + '次'" is-link to="ReservationList" />
            <van-cell title="违约次数" :value="user_defaultNumber + '次'"  />
            <van-cell title="账户当前状态" :value="user_state == 1 ? '正常' : '异常'" />
        </van-cell-group>
        <van-cell-group title="操作">
            <van-cell title="修改密码" value="" is-link />
            <van-cell title="退出" value="" is-link />
        </van-cell-group>

    </div>
</template>

<script>
    export default {
        name: 'SelfInfo',
        data() {
            return {
                userData_photo: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1464611983,1336853996&fm=26&gp=0.jpg',
                user_name: '',
                user_username: '',
                user_reservationNumber: '',
                user_defaultNumber: '',
                user_state: 1,
            }
        },
        watch: {},
        components: {},
        methods: {
            loadUserInfo() {
                let that = this;
                this.$axios.get('/api/user/user/userInfo')
                    .then(function(response) {
                        // 解析数据
                        console.log("userInfo", response.data.data);
                        let rs = response.data.data;
                        // that.floorList = response.data.data;
                        that.user_name = rs.name;
                        that.user_username = rs.username;
                        that.user_reservationNumber = rs.reservationNumber;
                        that.user_defaultNumber = rs.defaultNumber;
                        that.user_state = rs.state;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
        },
        created() {
            this.loadUserInfo();
        },

    }
</script>

<style>
    #selfinfo {
        background-color: #F7F8FA;
    }
</style>
